<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-layout-popuptype" *ngIf="showFl">
  <em class="ddp-bg-popup"></em>
  <div class="ddp-ui-popup">
    <!-- title -->
    <div class="ddp-ui-popup-title">
      <span class="ddp-txt-title-name">
        {{'msg.metadata.ui.codetable.choose.code.table.title' | translate}}
      </span>
      <div class="ddp-ui-pop-buttons">
        <a href="javascript:" class="ddp-btn-pop" (click)="onClickCancel()">{{'msg.comm.btn.cancl' | translate}}</a>
        <a href="javascript:" class="ddp-btn-pop ddp-bg-black" (click)="onClickDone()">{{'msg.comm.btn.add' | translate}}</a>
      </div>
      <!-- det -->
    </div>
    <!-- //title -->
    <div class="ddp-ui-popup-contents">
      <div class="ddp-ui-dataset-new">
        <div class="ddp-type-top-option ddp-clear">
          <!-- 검색 -->
          <div class="ddp-form-search ddp-fleft">
            <em class="ddp-icon-search"></em>
            <component-input
              [compType]="'search'"
              [value]="searchText"
              [placeHolder]="'msg.metadata.ui.codetable.search.ph' | translate"
              (changeValue)="searchText = $event; onSearchText();">
            </component-input>
          </div>
          <!-- //검색 -->
          <div class="ddp-ui-rightoption">
            <a href="javascript:" class="ddp-btn-selection ddp-gray" (click)="onClickCreateCodeTable()"><em class="ddp-icon-create"></em>{{'msg.metadata.ui.codetable.create.btn' | translate}}</a>
          </div>
        </div>
        <div class="ddp-wrap-viewtable ">
          <!-- 테이블 -->
          <div class="ddp-box-viewtable">
            <!-- gridhead -->
            <div class="ddp-ui-gridhead">
              <table class="ddp-table-form ddp-table-type2">
                <colgroup>
                  <col width="30%">
                  <col width="*">
                  <col width="100px">
                </colgroup>
                <thead>
                <tr>
                  <th class="ddp-cursor" (click)="onClickSort('name')">
                    {{'msg.metadata.th.codetable.table.name' | translate}}
                    <em class="ddp-icon-array-default2" *ngIf="selectedContentSort.key !== 'name' || selectedContentSort.sort === 'default'"></em>
                    <em class="ddp-icon-array-asc2" *ngIf="selectedContentSort.key === 'name' && selectedContentSort.sort === 'asc'"></em>
                    <em class="ddp-icon-array-des2" *ngIf="selectedContentSort.key === 'name' && selectedContentSort.sort === 'desc'"></em>
                  </th>
                  <th colspan="2">
                    {{'msg.metadata.th.codetable.description' | translate}}
                  </th>
                </tr>
                </thead>
              </table>
            </div>
            <!--// gridhead -->
            <!-- gridbody -->
            <div class="ddp-ui-gridbody">
              <table class="ddp-table-form ddp-table-type2 ddp-cursor ddp-inherit">
                <colgroup>
                  <col width="30%">
                  <col width="*">
                  <col width="100px">
                </colgroup>
                <tbody>
                <tr [class.ddp-selected]="selectedCodeTable && table.id === selectedCodeTable.id"
                    (click)="onSelectCodeTable(table)"
                    *ngFor="let table of codeTableList; let idx = index">
                  <td>
                    <div class="ddp-txt-long">
                      <a href="javascript:" class="ddp-link-detail ddp-type" (click)="onClickTableName(table.id)">
                        {{table.name}}
                        <em class="ddp-icon-window"></em>
                      </a>
                    </div>
                  </td>
                  <td>
                    <div class=" ddp-txt-long">
                      {{table.description}}
                    </div>
                  </td>
                  <td>
                    <div class="ddp-box-select" [class.ddp-selected]="table['previewShowFl']">
                      <a href="javascript:" (click)="onClickCodeTablePreview(idx)">{{'msg.metadata.ui.codetable.choose.code.table.preview' | translate}}</a>
                      <!-- popup -->
                      <div class="ddp-box-layout4" style="">
                        <a href="javascript:" class="ddp-btn-close" (click)="onClickPreviewPopupClose(table)"></a>
                        <div class="ddp-data-title" (click)="$event.stopImmediatePropagation();">
                          {{'msg.metadata.ui.codetable.choose.code.table.preview.title' | translate}}
                        </div>
                        <div class="ddp-data-code" (click)="$event.stopImmediatePropagation();">
                          <table class="ddp-table-code ddp-inherit">
                            <colgroup>
                              <col width="90px">
                              <col width="*">
                            </colgroup>
                            <tbody>
                            <tr *ngFor="let pair of getTableCodePair(table.id)">
                              <td>
                                <span class="ddp-txt-long">{{pair.code}}</span>
                                <!-- tooltip -->
                                <div class="ddp-ui-tooltip-info">
                                  <em class="ddp-icon-view-top"></em>
                                  {{pair.code}}
                                </div>
                                <!-- //tooltip -->
                              </td>
                              <td>
                                <span class="ddp-txt-long">{{pair.value}}</span>
                                <!-- tooltip -->
                                <div class="ddp-ui-tooltip-info">
                                  <em class="ddp-icon-view-top"></em>
                                  {{pair.value}}
                                </div>
                                <!-- //tooltip -->
                              </td>
                            </tr>
                            </tbody>
                          </table>
                          <a href="javascript:" class="ddp-link-detail" (click)="isShowPopCodeTable = true;">{{'msg.storage.btn.detail' | translate}}</a>
                        </div>
                      </div>
                      <!-- //popup -->
                    </div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
            <!--// gridbody -->
          </div>
          <!-- //테이블 -->
          <!-- 더보기 -->
          <div class="ddp-box-add-link" *ngIf="isMoreContents()" (click)="onClickMoreList()">
            <span class="ddp-link-type">{{'msg.comm.ui.more' | translate}} <em class="ddp-icon-view"></em></span>
          </div>
          <!-- //더보기 -->
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 코드 테이블 생성 컴포넌트 -->
<app-create-code-table (createComplete)="getCodeTableListPageInit()"></app-create-code-table>
<!-- //코드 테이블 생성 컴포넌트 -->

<popup-code-table *ngIf="isShowPopCodeTable" [codeTableId]="selectedCodeTable?.id" (closeEvent)="isShowPopCodeTable = false;"></popup-code-table>
